<template>
  <h2>demo11-component08.vue，多层嵌套组件跨越传值(响应式)</h2>
  <zhtt-card title="多层嵌套组件跨越传值(响应式)">
    <b>第一层组件：demo11-component08.vue</b><br/>
    sex:{{sex}}<br/>
    loginUser:{{loginUser}}<br/>
<!--    <button class="zhtt-btn" @click="updateLoginUser">更新sex，检测子组件中是否同步</button>-->
    <Demo10Component08Children01></Demo10Component08Children01>
  </zhtt-card>

</template>
<script>
import {provide, ref} from 'vue';
import Demo10Component08Children01 from './demo10-component08-children01.vue';

export default {
  components:{
    Demo10Component08Children01
  },
  data(){
    return {
      sex:'男',
      loginUser:'loginUser'
    }
  },
  setup(props, context){
    let sex = ref('男');
    let loginUser = ref({name:'张三', age: 24});
    console.log('父组件setup()', props, context);
    // 向子组件注入
    provide('loginUser', loginUser);
    provide('sex', sex);
    setInterval(()=>{
      loginUser.age = Math.random();
      console.log(loginUser);
    },2200);
  },
  methods:{
    updateLoginUser(){
      this.sex = Math.random();
    }
  },
}
</script>
<style scoped>

</style>